<template>
  <div>
    <div class="main-list-box new-rulesd">
      <div v-for="(item, index) in ruleList" :key="index">
        <div class="main-item-box">
          <div class="flex items-center justify-between main-item-boxTop">
            <div v-if="item.isShow" class="list-title">
              <span> {{ item.name }}</span>
              <!-- <img :src="editImg" alt="" @click="editName(index)" /> -->
              <i @click="editName(index)" v-html="editSvg('#666666')"></i>
              <i @click="editName(index)" v-html="editSvg(setStyles.primaryColor)"></i>
            </div>
            <div v-else class="list-title Input">
              <a-input
                v-model:value.trim="item.name"
                placeholder="请填写考勤规则名称"
                style="font-weight: 500"
                :maxlength="10"
                @keydown.enter="sureName(index)"
                @blur="sureName(index)"
              />
            </div>
            <div class="flex items-center del-box" @click="delRule(item, index)">
              <!-- eslint-disable -->
              <e v-html="delSvg('#999999')"></e>
              <e v-html="delSvg(setStyles.primaryColor)"></e>
              删除
            </div>
            <!-- eslint-enable -->
          </div>
          <Form ref="formRefs" name="dynamic_form_item" :model="item" :rules="formRules">
            <div class="h-58-new">
              <Form.Item label="生效范围" name="effectiveScope">
                <a-cascader
                  v-model:value="item.effectiveScope"
                  style="width: 100%"
                  multiple
                  max-tag-count="responsive"
                  :options="sectionCodeList"
                  :field-names="fieldNames"
                  :change-on-select="true"
                  placeholder="请选择生效范围~"
                  dropdown-class-name="micro-dormitory-grade-and-class"
                  @change="onChangeSectionCode($event, index)"
                >
                </a-cascader>
                <DownOutlined class="select-down-outlined" />
              </Form.Item>
            </div>
            <div class="attendance">
              <div class="title">考勤时间：</div>
              <div class="name">签到</div>
            </div>
            <div v-for="(item1, index1) in item.periodRule" :key="index1" class="att-bottom">
              <div class="att-bottom-left">
                <Form.Item label="签到名称">
                  <div class="select-z">
                    <a-select
                      v-model:value="item1.name"
                      placeholder="请选择签到名称"
                      :get-popup-container="
                        triggerNode => {
                          return triggerNode.parentNode;
                        }
                      "
                      :open="item1.selectOpen"
                      class="object-change"
                      dropdown-class-name="micro-dormitory-object-change"
                      @change="item1.selectOpen = false"
                      @blur="blurEvent(item1)"
                      @dropdownVisibleChange="dropdownVisibleChange($event, index, index1)"
                    >
                      <template #dropdownRender="{ menuNode: menu }">
                        <div class="sign-name-box">
                          <div
                            v-for="(item2, index2) in signListCheck"
                            :key="index2"
                            class="sign-name-item"
                            @click="changeSignName(index, index1, item2)"
                          >
                            <span>{{ item2.name }}</span>
                            <span @click.stop="removeName(item2)">
                              <!-- <img :src="removeImg" alt="" /> -->
                              x
                            </span>
                          </div>
                        </div>
                        <div v-if="signListCheck.length < 6" class="sign-create">
                          <div class="createTitle" @click="showInput">
                            <!-- <img :src="createImg" alt="" /> -->
                            <i v-html="addSvg('#333333')"></i>
                            <i v-html="addSvg(setStyles.primaryColor)"></i>
                            <i v-html="addSvg(setPrimaryColorActive)"></i>
                            <span>新建</span>
                          </div>
                          <div v-if="isInput" class="createInput">
                            <a-input
                              id="inputSearch"
                              v-model:value.trim="nameVal"
                              placeholder="请输入"
                              maxlength="2"
                              show-count
                            />
                            <a-button type="link" class="cancel" @click="cancelBtn(index, index1)"
                              >取消</a-button
                            >
                            <a-button type="primary" @click="sureBtn(index, index1)">确认</a-button>
                          </div>
                        </div>
                        <v-nodes :vnodes="menu" />
                      </template>
                    </a-select>
                  </div>
                </Form.Item>
                <Form.Item label="考勤时间">
                  <span class="z-time-box-new">
                    <TimeRangePicker
                      v-model:value="item1.timeArr"
                      :input-read-only="true"
                      format="HH:mm"
                      value-format="HH:mm"
                      @change="timeChange(index, index1)"
                    >
                      <template #suffixIcon> </template>
                      <template #separator>
                        <span class="time-center">至</span>
                      </template>
                    </TimeRangePicker>
                    <div class="z-time-box-icon">
                      <!-- <img src="@/assets/images/rule/u_clock.png" alt="" /> -->
                      <ClockCircleOutlined style="color: #c2c2c2; vertical-align: 0.01em" />
                    </div>
                  </span>
                </Form.Item>
              </div>
              <div
                v-if="item.periodRule.length > 1"
                class="delTimebox"
                @click="delTimeRule(item1, index)"
              >
                <!-- <img :src="removeImg" alt="" /> -->
                <e v-html="delSvg('#999999')"></e>
                <e v-html="delSvg(setStyles.primaryColor)"></e>
              </div>
            </div>
            <div class="att-btn">
              <div
                :class="`flex items-center justify-center access-control-add-box ${
                  item.periodRule.length >= 6 ? 'add-no-box' : ''
                }`"
                class="w-100"
                @click="addTimeList(item, index, item1, index1)"
                ><PlusOutlined class="mr-2" /> 添加时间
              </div>
            </div>
          </Form>
        </div>
        <span v-if="item.isErr" class="access-form-err">必填选项为空，请输入</span>
      </div>
    </div>
    <div
      :class="`flex items-center justify-center addBtn access-control-add-box ${
        ruleList.length >= 6 ? 'add-no-box' : ''
      }`"
      class="w-100"
      @click="addList"
      ><PlusOutlined class="mr-2" /> 添加规则
    </div>
    <!-- 删除提示 -->
    <a-modal
      v-if="isRemove"
      v-model:visible="isRemove"
      :footer="null"
      width="340px"
      title="温馨提示"
      @ok="sureRemove"
    >
      <div class="modal-box">
        <div class="img">
          <img :src="errImg" alt="" />
        </div>
        <div class="text">
          <span class="iconfont icon-icon_warning_outlined-copy"></span>
          <span>是否确认删除？</span>
        </div>
        <div class="btn">
          <a-button class="btn1" @click="cancelRemove">取消</a-button>
          <a-button class="modal-btn" type="primary" @click="sureRemove">确定</a-button>
        </div>
      </div>
    </a-modal>
    <!-- 路由跳转提示 -->
    <a-modal
      v-if="isLeaveRoute"
      v-model:visible="isLeaveRoute"
      :footer="null"
      width="340px"
      title="温馨提示"
      @ok="cancelLeave"
    >
      <div class="modal-box">
        <div class="img">
          <img :src="errImg" alt="" />
        </div>
        <div class="text">
          <span class="iconfont icon-icon_warning_outlined-copy"></span>
          <span>规则未保存，是否确认离开？</span>
        </div>
        <div class="btn">
          <a-button class="btn1" @click="cancelLeave">取消</a-button>
          <a-button class="modal-btn" type="primary" @click="sureLeave">确定</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { Form, TimePicker, message } from 'ant-design-vue';

import {
  ref,
  reactive,
  computed,
  nextTick,
  defineProps,
  defineEmits,
  defineExpose,
  onMounted,
  onBeforeUnmount,
  watch,
  watchEffect
} from 'vue';
import { PlusOutlined, ClockCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
import { useStore } from 'vuex';
import { getRgba, ColorLuminance } from '@/utils/validate.js';
import { delSvg, editSvg, addSvg } from '@/utils/svg.js';
import { getSectionCodeList, gradeListSection } from '@/api/common';
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import {
  getClockGroupList,
  createPeriodName,
  getPeriodNameList,
  deletePeriodName,
  delectClockGroup
} from '@/api/attendance';
const { TimeRangePicker } = TimePicker;
const store = useStore();
const props = defineProps({
  accessControlRulesRef: null,
  isDisabled: {
    default: false,
    type: Boolean
  },
  list: {
    default: () => [{}],
    type: Array
  },
  isUpdate: {
    type: Boolean,
    default: false
  },
  isRemoveVal: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['isUpdate', 'deletePeriodVal', 'addPeriodVal']);
let router = useRouter();
const editImg = ref(require('@/assets/images/icon_edit_nor@2x.png'));
const removeImg = ref(require('@/assets/images/accommodation/fi_trash-2.png'));
const createImg = ref(require('@/assets/images/icon_add_nor@2x.png'));

const nameVal = ref('');
const signListCheck = ref([]); // 签到名称列表
const addSignList = ref([]); // 新增签到名称列表
const isInput = ref(false); // 是否显示新建输入框
const isRemove = ref(false); // 是否显示删除提示
const isRemoveId = ref({}); // 要被删除的规则
const isLeaveRoute = ref(false); // 是否填写完毕
const isAppRoute = ref(false); // 是否是那个走app.vue的判断
// 学段列表
const sectionCodeList = ref([]);
const fieldNames = ref({
  label: 'label',
  value: 'value',
  children: 'children'
});
// 规则列表
let ruleList = ref([
  {
    id: '',
    name: '默认规则组1', // 规则名称
    isShow: false,
    isErr: false,
    periodRule: [
      {
        id: '', // 时段id
        name: [], // 时段名称
        period: '', // 时段规则
        timeArr: [], // 时段规则数组
        selectOpen: false,
        startTime: '',
        stopTime: ''
      }
    ],
    effectiveScope: ['-1'],
    effectiveScopeList: '-1'
  }
]);
// 删除时段的id
let deletePeriodIds = ref([]);
const isShowqwe = ref(false);
watch(
  () => ruleList.value,
  val => {
    console.log(val);
    sessionStorage.setItem('newRuleList', JSON.stringify(val));
    let signListChecks = JSON.parse(sessionStorage.getItem('signListChecks'));
    if (isShowqwe.value) {
      signListCheck.value = signListChecks;
      addSignList.value = [];
      console.log(signListCheck.value, '*****************************************');
      isShowqwe.value = false;
      sessionStorage.removeItem('signListChecks');
      store.commit('user/updateSignList', false);
    }
  },
  { deep: true }
);
watch(
  () => store.state.user.isShowModal,
  val => {
    console.log(val);
    if (val) {
      isLeaveRoute.value = true;
      isAppRoute.value = true;
      store.state.user.isShowModal = false;
      addSignList.value = [];
    }
  }
);

watch(
  () => store.state.user.isSignList,
  val => {
    console.log(val);
    if (val) {
      isShowqwe.value = true;
      addSignList.value = [];
    }
  }
);

// sessionStorage.setItem('ruleList', JSON.stringify(ruleList.value));
// let ruleVal = JSON.parse(JSON.stringify(ruleList.value));
const formRefs = ref(null);
// 表单检验规则
const formRules = ref({
  area: [{ required: true, message: '请选择生效范围', trigger: ['change', 'blur'], type: 'array' }],
  effectiveScope: [
    { required: true, message: '请选择生效范围', trigger: ['change', 'blur'], type: 'array' }
  ],
  sign: [{ required: true, message: '请选择签到名称', trigger: ['change', 'blur'], type: 'array' }],
  timeArr: [
    { required: true, message: '请选择时间规则', trigger: ['change', 'blur'], type: 'array' }
  ],
  accessDirection: [{ required: true, message: '请选择进出方向', trigger: 'change' }]
});
const deleteArr = ref([]);

watchEffect(() => {
  if (props.isUpdate) {
    GetClockGroupList();
    GetPeriodNameList();
    addSignList.value = [];
    emit('isUpdate', false);
  }
  if (props.isRemoveVal) {
    deletePeriodIds.value = [];
    emit('isRemove', false);
  }
});
onMounted(() => {
  sectionCodeList.value = [{ label: '全部', value: '-1', isLeaf: false }];
  getSectionData();
  GetClockGroupList();
  GetPeriodNameList();
});
onBeforeUnmount(() => {
  console.log('------------你操作了什么');
});
let toRoute = ref('');
let isLeave = ref(false);
onBeforeRouteLeave((to, from, next) => {
  let ruleVal = JSON.parse(sessionStorage.getItem('ruleList'));
  let ruleLists = JSON.parse(JSON.stringify(ruleList.value));
  console.log(JSON.stringify(ruleVal) === JSON.stringify(ruleLists));
  if (JSON.stringify(ruleVal) === JSON.stringify(ruleLists) || isLeave.value) {
    isLeave.value = false;
    next();
  } else {
    toRoute.value = to.path;
    isLeaveRoute.value = true;
  }
});

let sureLeave = () => {
  console.log('确认离开', toRoute.value);
  if (isAppRoute.value) {
    console.log('lueluelue');
    isAppRoute.value = false;
    isLeaveRoute.value = false;
    GetClockGroupList();
    GetPeriodNameList();
    router.push({
      path: '/ruleSetting'
    });

    store.commit('user/setRuleStatus', -1);
    store.commit('user/setRuleRouter', [
      {
        name: '首页',
        path: '/admin/usersInfo'
      },
      {
        name: '规则设置',
        path: '/ruleSetting'
      }
    ]);
  } else {
    isAppRoute.value = false;
    isLeave.value = true;
    router.push({ path: toRoute.value });
  }
};
let cancelLeave = () => {
  console.log('不变');
  if (isAppRoute.value) {
    isAppRoute.value = false;
  }
  isLeaveRoute.value = false;
};
// 编辑规则名称
let editName = index => {
  ruleList.value[index].isShow = false;
};
// 确认规则名称
let sureName = index => {
  if (ruleList.value[index].name) {
    ruleList.value[index].isShow = true;
  }
};
// 确认新增标签
let sureBtn = (index, index1) => {
  if (nameVal.value) {
    let arr = signListCheck.value.filter(el => el.name === nameVal.value);
    console.log(signListCheck.value, 'signListCheck.value----------------1');
    if (arr.length > 0) {
      message.error('标签名称不可重复');
      nameVal.value = '';
      return;
    } else {
      signListCheck.value.push({
        name: nameVal.value,
        id: '0'
      });
      addSignList.value.push(nameVal.value);

      nameVal.value = '';
      // ruleList.value[index].periodRule[index1].selectOpen = false;
      // isInput.value = false;

      emit('addPeriodVal', addSignList.value);
    }
  }
};
// 取消新增标签
let cancelBtn = (index, index1) => {
  nameVal.value = '';
  ruleList.value[index].periodRule[index1].selectOpen = false;
  isInput.value = false;
};
// 获取标签选择列表
function GetPeriodNameList() {
  let data = {
    isUse: 0
  };
  getPeriodNameList(data).then(res => {
    console.log(res);
    if (res.data.code === 200) {
      let data = res.data.data;
      signListCheck.value = data;
      sessionStorage.setItem('signListChecks', JSON.stringify(data));
    } else {
      message.error(res.data.msg);
    }
  });
}
// 点击新建显示标签输入框
let showInput = (index, index1) => {
  isInput.value = true;
};

// 显示标签选择option
let dropdownVisibleChange = (open, index, index1) => {
  console.log(open);
  if (document.activeElement.id !== 'inputSearch') {
    ruleList.value[index].periodRule[index1].selectOpen = open;
  } else {
    ruleList.value[index].periodRule[index1].selectOpen = true;
  }
};
let blurEvent = item => {
  if (document.activeElement.id !== 'inputSearch') {
    item.selectOpen = false;
    isInput.value = false;
  }
};

// 删除标签名称
let removeName = data => {
  if (data.id === '0') {
    signListCheck.value = signListCheck.value.filter(el => {
      return el.name !== data.name;
    });
  } else {
    signListCheck.value = signListCheck.value.filter(el => {
      return el.id !== data.id;
    });
  }

  console.log(signListCheck.value, 'signListCheck.value----------------2');
  addSignList.value = addSignList.value.filter(res => res !== data.name);
  emit('addPeriodVal', addSignList.value);
  ruleList.value.forEach((el, index) => {
    if (el.periodRule.length > 0) {
      el.periodRule.forEach((ele, index1) => {
        console.log(ele);
        if (ele.name === data.name) {
          ruleList.value[index].periodRule[index1].name = '';
        }
      });
    }
  });
  console.log(ruleList.value);
  if (data.id !== '0') {
    deletePeriodIds.value.push(data.id);
    emit('deletePeriodVal', deletePeriodIds.value);
  }
};

// 获取考勤规则
function GetClockGroupList() {
  getClockGroupList().then(res => {
    if (res.data.code === 200) {
      console.log(res, '----考勤规则回显');
      if (res.data.code === 200) {
        let data = res.data.data;
        if (data.length > 0) {
          data.forEach(el => {
            el.isShow = true;
            el.isErr = false;

            if (el.effectiveScope === '-1') {
              el.effectiveScope = [el.effectiveScope];
              el.effectiveScopeList = '-1';
            } else {
              el.effectiveScopeList = el.effectiveScope;
              let ArrList = JSON.parse(el.effectiveScope);
              el.effectiveScope = setData(ArrList);
            }
            if (el.periodRule) {
              el.periodRule = JSON.parse(el.periodRule);
              el.periodRule.forEach(it => {
                it.id = it.id + '';
                it.timeArr = it.period.split('-');
                it.selectOpen = false;
                it.startTime = it.period.split('-')[0];
                it.stopTime = it.period.split('-')[1];
              });
            }
          });
          ruleList.value = data;
        }
        sessionStorage.setItem('ruleList', JSON.stringify(ruleList.value));
        console.log(ruleList.value, '***********ruleList.value');
      }
    }
  });
}
// 处理回显的数据
function setData(data) {
  let Arr = [];
  data.forEach(it => {
    let arr = [];
    if (it.gradeList.length > 0) {
      console.log(it.gradeList);
      it.gradeList.forEach(ele => {
        let arr1 = [];
        arr1.push('-1', it.section, ele);
        Arr.push(arr1);
      });
    } else {
      arr.push('-1', it.section);
      Arr.push(arr);
    }
  });
  console.log(Arr, '/////////////');
  return Arr;
}

// 学段点击
function onChangeSectionCode(value, index) {
  console.log('学段选择完成-value', value, index);
  let obj = {};
  if (value.toString() === '-1') {
    ruleList.value[index].effectiveScopeList = '-1';
  } else {
    for (let i = 0; i < value.length; i++) {
      let getItem = value[i];
      if (obj[getItem[1]]) {
        obj[getItem[1]].push(getItem[2]);
      } else {
        obj[getItem[1]] = [];

        if (getItem[2]) {
          obj[getItem[1]].push(getItem[2]);
        }
      }
    }
    let getResult = [];
    for (let key in obj) {
      let item = {
        section: key,
        gradeList: obj[key]
      };
      getResult.push(item);
    }
    ruleList.value[index].effectiveScopeList = JSON.stringify(getResult);
  }
}
// 点击某个签到名称选择
function changeSignName(index, index1, item2) {
  console.log('点击某个签到名称选择', index1, item2);
  let arr = ruleList.value[index].periodRule.filter((el, i) => {
    return el.name === item2.name && i !== index1;
  });
  if (arr.length > 0) {
    message.error('签到名称不可重复');
  } else {
    ruleList.value[index].periodRule[index1].name = item2.name;
  }

  ruleList.value[index].periodRule[index1].id = item2.id;
  ruleList.value[index].periodRule[index1].selectOpen = false;
  isInput.value = false;
  console.log(signListCheck.value);
  let arrs = signListCheck.value.filter(el => {
    return el.id === '0';
  });
  if (arrs.length === 0) {
    emit('addPeriodVal', []);
  }
}

// 获取学段信息
function getSectionData() {
  getSectionCodeList().then(res => {
    console.log('获取学段信息', res);
    if (res.data.code === 200) {
      let sectionCodeListNew = res.data.data;
      if (sectionCodeListNew.length > 0) {
        sectionCodeListNew.forEach((item, index) => {
          getGradeData(item.sectionCode, index);
          item.label = item.sectionName;
          item.value = item.sectionCode;
          item.children = [];
          item.disabled = false;
          item.isLeaf = false;
        });
        sectionCodeList.value[0].children = sectionCodeListNew;
      } else {
        sectionCodeList.value[0].children = [];
      }
    }
  });
}
// 获取年级列表
function getGradeData(code, index) {
  gradeListSection(code).then(res => {
    if (res.data.code === 200) {
      let gradeListSe = res.data.data;
      if (gradeListSe.length > 0) {
        gradeListSe.forEach(item => {
          item.label = item.gradeName + '住宿';
          item.value = item.gradeId;
          item.disabled = false;
          item.isLeaf = true;
        });

        sectionCodeList.value[0].children[index].children = gradeListSe;
      } else {
        sectionCodeList.value[0].children[index].children = [];
      }
    }
  });
  console.log(sectionCodeList.value, '-----------sectionCodeList.value');
}
// 定义颜色变量
const setStyles = computed(() => {
  return {
    '--primaryColor': store.state.user.primaryColor,
    primaryColor: store.state.user.primaryColor,
    backgroundColor: getRgba(store.state.user.primaryColor, 0.1)
  };
});
// 新增规则列表
const addList = () => {
  let Index = ruleList.value.length;
  if (ruleList.value.length >= 6) return;
  if (ruleList.value.length > 0 && ruleList.value[0].effectiveScope.toString() === '-1') {
    message.warning('每个年级只能有一个考勤组!');
    return;
  }
  ruleList.value.push({
    name: '默认规则组' + (Index + 1), // 规则名称
    id: '',
    isShow: false,
    isErr: false,
    periodRule: [
      {
        id: '',
        name: [],
        selectOpen: false,
        period: '',
        timeArr: [],
        startTime: '',
        stopTime: ''
      }
    ],
    effectiveScope: [],
    effectiveScopeList: ''
  });

  nextTick(() => {
    console.log(document.getElementsByClassName('main-list-box')[0]);
    document.getElementsByClassName('main-list-box')[0].scrollTop = 999999;
  });
};
// 添加时间
function addTimeList(item, index, item1, index1) {
  if (ruleList.value[index].periodRule.length >= 6) return;
  ruleList.value[index].periodRule.push({
    id: '',
    name: [],
    period: '',
    selectOpen: false,
    timeArr: [],
    startTime: '',
    stopTime: ''
  });
  console.log(ruleList.value, '++++++++ruleList.value');
}
let delTimeRule = (item1, index) => {
  let arr = ruleList.value[index].periodRule.filter(el => {
    return el.id !== item1.id;
  });
  ruleList.value[index].periodRule = arr;
};

// 删除规则index1
const delRule = (item, index) => {
  console.log(item);
  if (item.id) {
    isRemoveId.value = item;
    isRemove.value = true;
  } else {
    ruleList.value = ruleList.value.filter(el => {
      return el !== item;
    });
  }
};
// 确认删除
let sureRemove = () => {
  ruleList.value = ruleList.value.filter(el => {
    return el !== isRemoveId.value;
  });
  isRemove.value = false;
};
let cancelRemove = () => {
  isRemoveId.value = {};
  isRemove.value = false;
};

// 考勤时间处理
function timeChange(index, index1) {
  console.log('选择的时间是什么', index);
  ruleList.value[index].periodRule[index1].startTime =
    ruleList.value[index].periodRule[index1].timeArr[0];
  ruleList.value[index].periodRule[index1].stopTime =
    ruleList.value[index].periodRule[index1].timeArr[1];
  ruleList.value[index].periodRule[index1].period =
    ruleList.value[index].periodRule[index1].timeArr.join('-');
  console.log(ruleList.value[index].periodRule[index1].period);
  if (
    time_to_sec(ruleList.value[index].periodRule[index1].startTime) -
      time_to_sec(ruleList.value[index].periodRule[index1].stopTime) ===
    0
  ) {
    message.error('结束时间不能等于开始时间');
    ruleList.value[index].periodRule[index1].startTime = '';
    ruleList.value[index].periodRule[index1].stopTime = '';
    ruleList.value[index].periodRule[index1].timeArr = [];
    ruleList.value[index].periodRule[index1].period = '';
  }

  let timeStatus = Fn(ruleList.value[index].periodRule);
  console.log('时间组状态是什么', timeStatus);
  if (timeStatus === false) {
    ruleList.value[index].periodRule[index1].startTime = '';
    ruleList.value[index].periodRule[index1].stopTime = '';
    ruleList.value[index].periodRule[index1].timeArr = [];
    ruleList.value[index].periodRule[index1].period = '';
    message.error('时间段重合请重新选择');
  }
}
function time_to_sec(time) {
  if (time !== null) {
    let s = '';
    let hour = time.split(':')[0];
    let min = time.split(':')[1];
    let sec = time.split(':')[2];
    s = Number(hour * 3600) + Number(min * 60);
    return s;
  }
}

function Fn(dateAr) {
  for (let k in dateAr) {
    if (!judege(k, dateAr)) {
      return false;
    }
  }
  return true;
}
function judege(idx, dateAr) {
  for (let k in dateAr) {
    if (idx !== k) {
      if (
        dateAr[k].startTime <= dateAr[idx].startTime &&
        dateAr[k].stopTime > dateAr[idx].startTime
      ) {
        return false;
      }
      if (
        dateAr[k].startTime < dateAr[idx].stopTime &&
        dateAr[k].stopTime >= dateAr[idx].stopTime
      ) {
        return false;
      }
    }
  }
  return true;
}
const setPrimaryColor = computed(() => store.state.user.primaryColor);
const backgroundColorValue = computed(() => getRgba(store.state.user.primaryColor, 0.1));
const setPrimaryColorActive = computed(() => ColorLuminance(store.state.user.primaryColor, -0.2));
defineExpose({
  ruleList,
  deleteArr
});
</script>

<style lang="less" scoped>
@import url('./accessControlRules.less');
.access-control-add-box {
  margin-right: 12px !important;
  height: 56px;
  background: #ffffff;
  border-radius: 4px;
  border: none;
  font-size: 16px;
}
.access-control-add-box {
  min-width: 100%;
}
.access-control-add-box:hover {
  cursor: pointer;
  border-color: v-bind('setStyles.primaryColor');
  color: v-bind('setStyles.primaryColor');
}
.main-item-box {
  height: auto;
  padding: 24px 16px !important;
  position: relative;
  .main-item-boxTop {
    position: absolute;
    width: 100%;
    padding-right: 32px;
    .list-title {
      display: flex;
      align-items: center;
      margin-bottom: 0;
      span {
        padding-right: 6px;
      }
      i {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
      i:last-child {
        display: none;
      }
      span:hover ~ i:last-child {
        display: none;
      }
      span:hover ~ i:nth-child(2) {
        display: inline-block;
      }
    }
    .list-title:hover {
      i:nth-child(2) {
        display: none;
      }
      i:last-child {
        display: inline-block;
      }
    }
    .Input {
      border-bottom: 1px solid #e1dddd;
      margin-top: -4px;
      input {
        border: none !important;
        outline: none;
        box-shadow: none !important;
        background: transparent;
        font-size: 18px;
        color: #222222;
        font-weight: 600 !important;
        padding-left: 0;
      }
    }
  }
  ::v-deep(.micro-dormitory-form-horizontal) {
    margin-top: 43px;
  }
}

.h-58-new {
  height: 58px;
}
.attendance {
  margin-bottom: 28px;
  justify-content: start !important;
  .title {
    font-size: 16px;
    color: #222222;
    height: 40px;
    &::before {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
  .name {
    width: 64px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: rgba(255, 154, 4, 0.16);
    border-radius: 53px;
    font-size: 16px;
    color: #ff9a04;
  }
}

.att-bottom {
  padding-left: 79px;
  align-items: center;
  box-sizing: border-box;
  .att-bottom-left {
    flex: 5;
    display: flex;
    justify-content: space-between;
    :deep(.micro-dormitory-form-item-label) {
      &::before {
        display: inline-block;
        margin-right: 4px;
        color: #ff4d4f;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';
      }
    }
  }
  .delTimebox {
    // width: 40px;
    margin-left: 20px;
    margin-bottom: 18px;
    display: flex;
    e {
      cursor: pointer;
      width: 16px;
      height: 16px;
    }
    e:last-child {
      display: none;
    }
  }
  .delTimebox:hover {
    e {
      display: none;
    }
    e:last-child {
      display: inline-block;
    }
  }
  .delTimebox:active {
    e {
      display: none;
    }
    e:last-child {
      display: inline-block;
      opacity: 0.6;
    }
  }
}
.att-btn {
  padding-left: 95px;
  font-size: 16px;
}
.select-z /deep/.micro-dormitory-select-arrow svg {
  display: none;
}

.sign-name-box {
  box-sizing: border-box;
  padding: 0 8px;
}
.sign-create {
  box-sizing: border-box;
  padding: 4px 8px;
  border-top: 1px solid #ededed;
  .createTitle {
    line-height: 36px;
    display: flex;
    align-items: center;
    i {
      width: 16px;
      height: 16px;
    }
    i:nth-child(2),
    i:nth-child(3) {
      display: none;
    }
    span {
      margin-left: 6px;
      font-size: 14px;
      color: #333333;
      user-select: none;
    }
  }
  .createTitle:hover {
    span {
      color: v-bind(setPrimaryColor);
    }
    i {
      display: none;
    }
    i:nth-child(2) {
      display: inline-block;
    }
  }
  .createTitle:active {
    span {
      color: v-bind(setPrimaryColorActive);
    }
    i {
      display: none !important;
    }
    i:nth-child(3) {
      display: inline-block !important;
    }
  }
  .createInput {
    display: flex;
    align-items: center;
    padding-bottom: 4px;

    & > span {
      flex: 8;
    }
    & > button {
      flex: 2;
    }
    .cancel {
      border: none;
      outline: none;
      &:hover,
      &:visited,
      &:active,
      &:focus {
        border: none;
      }
    }
  }
}
::v-deep(.micro-dormitory-form .micro-dormitory-form-item-control-input #inputSearch) {
  text-align: left !important;
}
.sign-name-item {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  &:hover {
    color: v-bind('setStyles.primaryColor');
  }
  span:last-child {
    color: #c2c2c2;
  }
  span:last-child:hover {
    color: v-bind('setStyles.primaryColor');
  }
  img {
    width: 18px;
    height: 18px;
  }
}

::v-deep(.micro-dormitory-modal-header) {
  border-bottom: none;
  padding-bottom: 0;
}
::v-deep(.micro-dormitory-modal-title) {
  font-size: 18px;
}
.modal-box {
  .img {
    img {
      margin: 0 auto;
      width: 126px;
    }
  }
  .text {
    width: 292px;
    height: 48px;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    .iconfont {
      margin-top: 3px;
      color: #ff9a04;
    }
    span {
      margin-left: 8px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: LEFT;
      color: #666666;
    }
  }
  .btn {
    margin-top: 16px;
    text-align: right;
    .btn1 {
      color: #999999;
      margin-right: 16px;
      // padding: 0;
    }
    .btn1:hover {
      color: var(--van-primary-color-web);
    }
  }

  .modal-btn {
    width: 60px;
    height: 32px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    border-radius: 4px;
  }
}

:deep(.micro-dormitory-form) {
  > div {
    width: calc(100% - 105px) !important;
    min-width: 872px;
  }
}
:deep(.micro-dormitory-form-item) {
  width: 46% !important;
}
:deep(.micro-dormitory-picker) {
  width: 100% !important;
}
.main-list-box {
  padding: 0 !important;
}
.addBtn {
  height: 56px;
  background: #f8f8f8;
  border-radius: 4px;
  margin-top: 8px;
}
.select-down-outlined {
  position: absolute;
  right: 11px;
  font-size: 13px;
  color: #e1dddd;
  top: 50%;
  transform: translateY(-50%);
}
.main-item-box {
  :deep(.micro-dormitory-grade-and-class) {
    border: 0 !important;
    padding: 4px 0;
    .micro-dormitory-cascader-checkbox-inner {
      border-radius: 2px;
    }
    .micro-dormitory-cascader-menu-item {
      padding: 5px 8px;
    }
    .micro-dormitory-cascader-menu-item:hover {
      background-color: transparent;
      color: v-bind(setPrimaryColor);
    }
    .micro-dormitory-cascader-menu-item-active {
      color: v-bind(setPrimaryColor);
      background-color: v-bind(backgroundColorValue) !important;
    }
    .micro-dormitory-cascader-checkbox-indeterminate {
      .micro-dormitory-cascader-checkbox-inner {
        border-color: v-bind(setPrimaryColor);
      }
    }

    // .micro-dormitory-cascader-menus .micro-dormitory-cascader-menu:first-child {
    //   .micro-dormitory-cascader-menu-item-active {
    //     .micro-dormitory-cascader-checkbox-inner {
    //       border-radius: 50%;
    //     }
    //     .micro-dormitory-cascader-checkbox-inner::after,
    //     .micro-dormitory-cascader-menu-item-expand::after {
    //       border: 0 !important;
    //       display: block !important;
    //       width: 16px !important;
    //       height: 16px !important;
    //       margin-top: -8px !important;
    //       margin-left: -8px !important;
    //       background-color: v-bind(setPrimaryColor) !important;
    //       border-top: 0 !important;
    //       border-left: 0 !important;
    //       border-radius: 16px !important;
    //       top: 50% !important;
    //       left: 50% !important;
    //       transform: scale(0.5) !important;
    //       opacity: 1 !important;
    //       transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) !important;
    //     }
    //   }
    //   .micro-dormitory-cascader-menu-item {
    //     .micro-dormitory-cascader-checkbox-inner {
    //       border-radius: 50%;
    //     }
    //     .micro-dormitory-cascader-checkbox-checked .micro-dormitory-cascader-checkbox-inner {
    //       background-color: #fff !important;
    //       border: 1px solid #d9d9d9 !important;
    //     }
    //   }
    // }
  }
  ::v-deep(.micro-dormitory-object-change) {
    border: 0 !important;
  }
}
.att-bottom-left {
  .micro-dormitory-form-item {
    min-width: 358px !important;
    margin-left: 16px;
  }
}
.micro-dormitory-form > div {
  // width: 100% !important;
  margin-right: 12px;
}
</style>
